<template>
  <div class="config_message">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="{ xl: {span: 3 }, lg: { span: 4 } }"
      :wrapper-col="{ xl:{span: 21}, lg: { span: 20 }  }"
    >
      <!-- 标题 -->
      <a-form-model-item label="图表名称" prop="title">
        <a-input v-model="form.title" placeholder="请输入图表名称"/>
      </a-form-model-item>
      <!-- 说明 -->
      <a-form-model-item label="说明(可选)" prop="remark">
        <a-textarea v-model="form.remark" placeholder="请输入说明" />
      </a-form-model-item>
      <!-- 图表类型 -->
      <a-form-model-item label="图表类型" prop="type">
        <a-radio-group v-model="form.type" button-style="solid" class="radio_button_group" @change="onChartChange">
          <div class="hang_item">
            <div class="chart_item_style">
              <a-radio-button value="line">
                <icon-font type="icon-zhexiantu1" class="chart_item" />
                <span>折线图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="bar">
                <icon-font type="icon-biaoshilei_zhuzhuangtu" class="chart_item" />
                <span>柱状图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="area">
                <icon-font type="icon-mianjitu" class="chart_item" />
                <span>面积图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="strip">
                <icon-font type="icon-tiaoxingtu" class="chart_item" />
                <span>条形图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="pie">
                <icon-font type="icon-bingtu" class="chart_item" />
                <span>饼状图</span>
              </a-radio-button>
            </div>
          </div>
          <div class="hang_item">
            <div class="chart_item_style">
              <a-radio-button value="table">
                <icon-font type="icon-dashujukeshihuaico-" class="chart_item" />
                <span>表 格</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="map">
                <icon-font type="icon-diqiuyi" class="chart_item" />
                <span>地 图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="group">
                <icon-font type="icon-zuhetu" class="chart_item" />
                <span>组合图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="loop">
                <icon-font type="icon-huanxingtu" class="chart_item" />
                <span>环 图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="number">
                <icon-font type="icon-zhibiaoka" class="chart_item" />
                <span>数字指标</span>
              </a-radio-button>
            </div>
          </div>
          <div class="hang_item">
            <div class="chart_item_style">
              <a-radio-button value="funnel">
                <icon-font type="icon-funnelloudou" class="chart_item" />
                <span>漏斗图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="path">
                <icon-font type="icon-ManagePaths" class="chart_item" />
                <span>路径图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">
              <a-radio-button value="retention">
                <icon-font type="icon-svg-" class="chart_item" />
                <span>留存图</span>
              </a-radio-button>
            </div>
            <div class="chart_item_style">

            </div>
            <div class="chart_item_style">

            </div>
          </div>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import bus from '@/views/components/bus';
import { Icon } from 'ant-design-vue';
import svgIndex from './svg/index';
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: svgIndex,
})
  export default {
    props:['form', "drawer"],
    data() {
      return {
        rules: {
          title: [
            { required: true, message: '图表名称不能为空', trigger: 'blur' },
            { max: 100, message: '最大长度限制为100个字符', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择图表类型', trigger: 'change' }
          ],
          remark: [
            { max: 255, message: '最大长度限制为255个字符', trigger: 'blur' }
          ]
        }
      }
    },
    components: {
      IconFont,
    },
    watch: {
      drawer () {
        this.$refs.ruleForm && this.$refs.ruleForm.clearValidate()
      }
    },
    methods: {
      onBasicInfoSubmit () {
        let abb = null
        this.$refs.ruleForm.validate(valid => {
          abb = valid
        })
        return abb
      },
      onChartChange (e) {
        bus.$emit('onChartChange',e.target.value)
      }
    },
    mounted() {
    },
    beforeDestroy() {
    },
  }
</script>

<style scoped>
.radio_button_group {
  display: flex;
  flex-direction: column;
}

.radio_button_group .hang_item {
  display: flex;
  justify-content: space-between;
}

.chart_item_style{
  height: 120px;
  margin-bottom: 30px;
  margin-left: 5px ;
  margin-right: 5px ;
}

.radio_button_group>>>.chart_item_style {
  display: flex;
  flex-direction: column;
  width: 120px;
  align-items: center;
}

.chart_item_style>>>.chart_item {
  width: 40px;
  font-size: 32px;
}

.chart_item_style>label {
  width: 100%;
  text-align: center;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart_item_style>span {
  font-size: 18px;
  display: inline-block;
  line-height: 50px;
  text-align: center;
}

.chart_item_style>label >>> span {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.config_message {
  margin-top: 20px;
}
</style>
